Embed and Marquee page blocks and icons for grid blocks#609
Embed and Marquee page blocks and icons for grid blocks#609rajat1saxena merged 3 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| processedSvg(svgCode, svgStyle) || | ||
| '<div class="text-red-500">Invalid SVG</div>', |
Check failure
Code scanning / CodeQL
DOM text reinterpreted as HTML High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 8 months ago
To fix this vulnerability, we must ensure that any SVG code rendered via dangerouslySetInnerHTML is properly sanitized. The best way is to use a well-known SVG sanitizer library (such as dompurify) to clean the SVG code before rendering. This should be done inside the processedSvg function, so that any SVG code passed to it is sanitized before being returned and rendered. The fix involves:
- Importing
dompurify(or similar) at the top of the file. - Modifying the
processedSvgfunction to sanitize its output usingDOMPurify.sanitize. - Ensuring that all SVG code rendered via
dangerouslySetInnerHTMLis sanitized.
All changes are to be made in packages/page-blocks/src/blocks/grid/admin-widget/svg-editor.tsx.
| @@ -9,3 +9,4 @@ | ||
| import { Check, Pencil, Trash, AlertCircle } from "lucide-react"; | ||
| import { validateSvg, processedSvg } from "../helpers"; | ||
| import { validateSvg } from "../helpers"; | ||
| import DOMPurify from "dompurify"; | ||
|
|
||
| @@ -86,2 +87,11 @@ | ||
|
|
||
| // Sanitized processedSvg implementation | ||
| function processedSvg(svgCode: string, svgStyle: SvgStyle): string { | ||
| if (!validateSvg(svgCode)) return ""; | ||
| // Replace currentColor with the selected color | ||
| const replaced = svgCode.replace(/currentColor/g, svgStyle.svgColor); | ||
| // Sanitize the SVG before returning | ||
| return DOMPurify.sanitize(replaced, { USE_PROFILES: { svg: true } }); | ||
| } | ||
|
|
||
| return !isEditing ? ( |
| @@ -67,3 +67,4 @@ | ||
| "react-redux": "^8.1.2", | ||
| "swr": "^2.3.3" | ||
| "swr": "^2.3.3", | ||
| "dompurify": "^3.2.6" | ||
| }, |
| Package | Version | Security advisories |
| dompurify (npm) | 3.2.6 | None |
| <p className="font-semibold text-sm">Icon preview</p> | ||
| <div | ||
| className="w-[100px] h-[60px] flex items-center justify-center" | ||
| dangerouslySetInnerHTML={{ __html: svgText }} |
Check failure
Code scanning / CodeQL
DOM text reinterpreted as HTML High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 8 months ago
To fix the vulnerability, we must sanitize the SVG markup before rendering it with dangerouslySetInnerHTML. The best way is to use a well-known library such as dompurify to sanitize the SVG input. This ensures that only safe SVG markup is rendered, stripping out any potentially dangerous scripts or HTML. The fix involves:
- Importing
dompurify(specifically, thesanitizefunction). - Sanitizing
svgTextbefore passing it todangerouslySetInnerHTML. - This can be done by creating a sanitized version of
svgText(e.g.,sanitizedSvgText) and using that in the render.
All changes are within packages/page-blocks/src/blocks/marquee/admin-widget/item-editor.tsx.
| @@ -1,2 +1,3 @@ | ||
| import React from "react"; | ||
| import DOMPurify from "dompurify"; | ||
| import { | ||
| @@ -69,3 +70,3 @@ | ||
| className="w-[100px] h-[60px] flex items-center justify-center" | ||
| dangerouslySetInnerHTML={{ __html: svgText }} | ||
| dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgText, { USE_PROFILES: { svg: true } }) }} | ||
| /> |
| @@ -67,3 +67,4 @@ | ||
| "react-redux": "^8.1.2", | ||
| "swr": "^2.3.3" | ||
| "swr": "^2.3.3", | ||
| "dompurify": "^3.2.6" | ||
| }, |
| Package | Version | Security advisories |
| dompurify (npm) | 3.2.6 | None |
2 participants
Also include a bug fix related to newsletter-signup block being shared